<template>
  <!-- 这个页面组件用来承载二级路由和底部导航栏（TabBar） -->
  <div style="display: flex; flex-direction: column; height: 100vh;">

    <div style="flex: 1;">
      <KeepAlive>
        <RouterView />
      </KeepAlive>
    </div>

    <div style="display: flex; justify-content: space-evenly;">

      <!-- 这种直接在 to 中写死路径的方式有缺点：路由path配置一旦修改，这些地址也要修改 -->
      <!-- <RouterLink to="/layout/home" >首页</RouterLink>
      <RouterLink to="/find-house" >找房</RouterLink>
      <RouterLink to="/info" >资讯</RouterLink>
      <RouterLink to="/my" >我的</RouterLink> -->

      <!-- 其实：RouterLink也可以用 name 方式跳 -->
      <RouterLink :to="{ name: 'HomePage' }" >首页</RouterLink>
      <RouterLink :to="{ name: 'FindHousePage' }" >找房</RouterLink>
      <RouterLink :to="{ name: 'InfoPage' }" >资讯</RouterLink>
      <RouterLink :to="{ name: 'MyPage' }" >我的</RouterLink>
    </div>

  </div>
</template>

<script>
export default {
  name: 'LayoutPage'
}
</script>

<style>
a {
  padding: 5px;
  background-color: black;
  color: white;
  text-decoration: none;
}

.router-link-active {
  background-color: saddlebrown;
}
</style>